/*
 * @Author: HZK
 * @Date: 2020-09-25 13:07:53
 * @LastEditTime: 2020-12-29 11:19:37
 * @LastEditors: hanfengmi
 * @Description: 图片预处理
 *
 * @params:
 * src, 图片地址
 * imgClass, 图片外部自定义class
 * style, 自定义行内样式
 * alt, 图片alt
 * title, 图片title
 * onClick, 图片点击事件
 * baseUrl 失败后展示图片url,默认为@/assets/no-img.png
 */
import React, { PureComponent } from 'react'
import NoImg from '@/assets/no-img.png'
import styles from './index.less'

class Index extends PureComponent {
  state = {
    error: false
  }

  NoImg = (e) => {
    const { error } = this.state
    const { baseUrl } = this.props
    if( !error ) {
      e.target.src = baseUrl || NoImg     
    }
    this.setState({
      error: true
    })
  }
  
  render() {
    const {src, imgClass, style, alt = 'img', title = 'img', onClick} = this.props
    const props = {
      className: `${imgClass} ${styles.Img}`,
      src,
      style: { ...style  },
      onError: (e) => this.NoImg(e),
      onClick
    }
    return <img {...props} alt={alt} title={title} />
  }
}

export default Index